<template>
  <div class="app-container">
    <!-- table列表页 -->
    <div v-show="!is_detail" class="Page_box">
      <!-- 表格和重置按钮 -->
      <div class="filter-container">
        <div class="input-box">
          <span class="item-label">提交时间: </span>
          <el-date-picker v-model="submis_time" type="datetimerange" value-format="yyyy-MM-dd hh:mm:ss"
            start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDateTime" />
        </div>
        <div class="input-box">
          <span class="item-label">网点: </span>
          <el-select class="group-select" v-model="listQuery.pointId" filterable reserve-keyword placeholder="选择网点"
            @change="getList" clearable>
            <el-option v-for="item in list_branch" :key="item.siteId" :label="item.siteName" :value="item.siteId">
            </el-option>
          </el-select>
        </div>
        <div class="input-box">
          <span class="item-label">发起人: </span>
          <el-select class="group-select" v-model="listQuery.submitUserId" filterable reserve-keyword placeholder="选择发起人"
            @change="getList" clearable>
            <el-option v-for="item in list_initiator" :key="item.userId" :label="item.username" :value="item.userId">
            </el-option>
          </el-select>
        </div>
        <div class="input-box">
          <span class="item-label">巡店人: </span>
          <el-select class="group-select" v-model="listQuery.patrolUserId" filterable reserve-keyword placeholder="选择巡店人"
            @change="getList" clearable>
            <el-option v-for="item in list_patrol" :key="item.userId" :label="item.username" :value="item.userId">
            </el-option>
          </el-select>
        </div>
        <div class="input-box">
          <span class="item-label">合格状态: </span>
          <el-select class="group-select" v-model="listQuery.qualify" filterable reserve-keyword placeholder="全部"
            @change="getList" clearable>
            <el-option v-for="item in list_qualify" :key="item.id" :label="item.label" :value="item.id"> </el-option>
          </el-select>
        </div>
        <el-button class="plain-btn" @click="clearFilter">重置</el-button>
      </div>

      <!-- 表格 -->
      <el-table ref="crurecordTable" v-loading="listLoading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading"
        border :data="dataList">
        <el-table-column label="网点" align="center" width="160">
          <template slot-scope="{ row }">
            <span>{{ row.siteName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" width="180" fit align="center" prop="submitTime">
          <!-- 时间戳 -->
          <template slot-scope="{ row }">
            <span>{{
              row.submitTime | parseTime("{y}-{m}-{d} {h}:{i}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="patrolUserName" label="巡店人" width="120" align="center" />
        <el-table-column label="巡店方式" align="center">
          <template slot-scope="{ row }">
            <span>{{
              row.method == 0 ? "图片巡店" : "视频巡店"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="得分/总分/得分率" width="180" align="center">
          <template slot-scope="{ row }">
            {{ row.gotScore }} / {{ row.totalScore }} /
            {{ row.ratioScore*100 }}%
          </template>
        </el-table-column>
        <el-table-column prop="totalIssue" label="问题总数" align="center" />
        <el-table-column label="是否合格" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.qualify == 0 ? "不合格" : "合格" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="submitState" label="事件状态" align="center">
          <template slot-scope="{ row }">
            <span>{{
              row.submitState == 0 ? "未提交" : "已提交"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="60" align="center">
          <template slot-scope="{ row }">
            <!-- 点击查看 判断是否is_detail为真 为真则展示详情页(旧的，现在新的是发请求) -->
            <span class="action action-update" @click="viewDetails(row)">查看</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 1 分页器 -->
      <pagination margin="0" v-show="true" :total="totalData.totalCount" :page.sync="listQuery.offset" :limit.sync="listQuery.limit"
        @pagination="getList" />
    </div>
    <!-- 查看详情页 -->
    <div v-if="is_detail" class="detail" v-loading="listLoading2">
      <!-- 三个卡片的大盒子 -->
      <div class="crurecordBox">
        <!-- 基本信息 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div class="cube" />
            <span>基本信息</span>
          </div>
          <div class="contentBox">
            <div>
              <!-- 基本信息 1 -->
              <div class="text item">
                <div>网点：
                  <span v-if="detailsiteName == null">暂无</span>
                  <span v-else>{{ detailsiteName }}</span>
                </div>
                <div class="box-content">
                  巡店人：
                  <span v-if="detailpatrolUserName == null">暂无</span>
                  <span v-else>{{ detailpatrolUserName }}</span>
                </div>
                <div class="box-content">
                  巡店时间：
                  <span v-if="detailsubmitDate == null">暂无</span>
                  <span v-else>{{detailsubmitDate | parseTime("{y}-{m}-{d} {h}:{i}")}}</span>
                </div>
              </div>
            </div>
            <!-- 基本信息 2 -->
            <div>
              <div class="text item">
                <div>
                  巡店方式：
                  <span v-if="detailmethod == null">暂无</span>
                  <span v-else>{{detailmethod == 0 ? "图片巡店" : "视频巡店"}}</span>
                </div>
                <div class="box-content">
                  事件状态：
                  <span v-if="detailstate == null">暂无</span>
                  <span v-else>{{ detailstate == 0 ? "图片巡店" : "视频巡店" }}</span>
                </div>
                <!-- <div class="box-content">
                  是否合格：{{ checkList.baseInfo.qualify == 0 ? "不合格" : "合格" }}
                </div> -->
              </div>
            </div>
          </div>
        </el-card>
        <!-- 巡店得分 -->
        <el-card class="box-card2">
          <div slot="header" class="clearfix">
            <div class="cube" />
            <span>巡店得分</span>
          </div>
          <div class="contentBox">
            <div>
              <div class="text item">
                <div>
                  <el-progress class="_progress" type="circle" :format="formatText1(this.detailgotScore/this.detailtotalScore)"
                    :percentage="(this.detailgotScore/this.detailtotalScore)*100" :width="110" :stroke-width="10" />
                </div>
              </div>
            </div>
            <div class="itemBox">
              <div class="text item">
                <div>
                  <!-- 圆点 -->
                  <div class="point count1" />
                  总分：{{ detailtotalScore }}
                </div>
                <div class="box-content">
                  <!-- 圆点 -->
                  <div class="point count2" />
                  有效总分：{{ detailvalidScore }}
                </div>
                <div class="box-content">
                  <!-- 圆点 -->
                  <div class="point count3" />
                  本次得分: {{ detailgotScore }}
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <!-- 结果统计 -->
        <el-card class="box-card">
          <div slot="header" class="statistics">
            <div class="result">
              <div class="cube" />
              <span>结果统计</span>
            </div>
            <!-- 判断是否合格 而展示不同的样式 目前没有是否合格的数据 -->
            <div class="passpie3" v-if="checkList.baseInfo.qualify == 0 ">不合格</div>
            <div class="passpie2" v-else-if="checkList.baseInfo.qualify == 1 ">合格</div>
          </div>
          <!-- 点检总数图表 -->
          <div class="contentBox">
            <div>
              <div class="text item">
                <div class="data-picture">
                  <el-progress class="_progress" type="circle" :format="formatText2(detailtotalIssue)"
                    :percentage="100" :width="110" :stroke-width="10" />
                </div>
              </div>
            </div>
            <div class="itemBox">
              <div class="text item">
                <div>
                  <div class="point count4" />
                  <!-- 圆点 -->
                  合格：{{ detailqualify1 }}
                </div>
                <div class="box-content">
                  <div class="point count5" />
                  <!-- 圆点 -->
                  不合格: {{ detailqualify0 }}
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 详细页面第二个大盒子 -->
      <div class="centerBox">
        <!-- 标签页面 -->
        <div class="threebtn">
          <el-button class="plain-btn" @click="detailsReturn">返回</el-button>
          <el-button class="plain-btn" @click="click_1('-1')">全部</el-button>
          <el-button class="plain-btn" @click="click_1('1')">合格</el-button>
          <el-button class="plain-btn" @click="click_1('0')">不合格</el-button>
        </div>
        <!-- 页面 -->
        <div>
          <!-- 全部页面 -->
          <div v-if="buttonTab == '-1'">
            <div>
              <el-table :data="RecordIssue" border style="width: 100%">
                <!-- 图片 -->
                <el-table-column class="pics" label="取证图片" width="460">
                  <!-- 照片进行横向循环展示图片 -->
                  <template slot-scope="scope">
                    <div class="demo-image__preview">
                      <el-image v-for="(item, index) in scope.row.pictures" :key="index" style="
                          width: 125px;
                          height: 75px;
                          margin: 0 10px 0 10px;"
                        :src="'http://'+item.pictureUrl" :preview-src-list="['http://'+item.pictureUrl]" />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="结果">
                  <template slot-scope="{ row }">
                    {{ row.gotScore == 0 ? "不合格" : "合格" }} | 得分:{{
                      row.gotScore
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="考评项">
                  <template slot-scope="{ row }">{{ row.checkName }} </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" />
              </el-table>
            </div>
          </div>
          <!-- 合格页面 -->
          <div v-if="buttonTab == '0'">
            <div>
              <el-table :data="RecordIssue" border style="width: 100%">
                <!-- 图片 -->
                <el-table-column class="pics" label="取证图片" width="460">
                  <!-- 照片进行横向循环展示图片 -->
                  <template slot-scope="scope">
                    <div class="demo-image__preview">
                      <el-image v-for="(item, index) in scope.row.pictures" :key="index" style="
                          width: 125px;
                          height: 75px;
                          margin: 0 10px 0 10px;"
                        :src="'http://'+item.pictureUrl" :preview-src-list="['http://'+item.pictureUrl]" />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="结果">
                  <template slot-scope="{ row }">
                    {{ row.gotScore == 0 ? "不合格" : "合格" }} | 得分:{{
                      row.gotScore
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="考评项">
                  <template slot-scope="{ row }">{{ row.checkName }} </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" />
              </el-table>
            </div>
          </div>
          <!-- 不合格页面 -->
          <div v-if="buttonTab == '1'">
            <div>
              <el-table :data="RecordIssue" border style="width: 100%">
                <!-- 图片 -->
                <el-table-column class="pics" label="取证图片" width="460">
                  <!-- 照片进行横向循环展示图片 -->
                  <template slot-scope="scope">
                    <div class="demo-image__preview">
                      <el-image v-for="(item, index) in scope.row.pictures" :key="index" style="
                          width: 125px;
                          height: 75px;
                          margin: 0 10px 0 10px;"
                        :src="'http://'+item.pictureUrl" :preview-src-list="['http://'+item.pictureUrl]" />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="结果">
                  <template slot-scope="{ row }">
                    {{ row.gotScore == 0 ? "不合格" : "合格" }} | 得分:{{
                      row.gotScore
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="考评项">
                  <template slot-scope="{ row }">{{ row.checkName }} </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    parseTime
  } from '@/utils' // 解析时间
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import {
    listInspection2,
    listInspection3,
    cruisingBranch,
    cruisingUser,
    cruisingInitiator,
    getRecordBase,
    getRecordScore,
    getRecordResult,
    getRecordIssue
  } from '@/api/cruising'


  export default {
    components: {
      Pagination
    },
    data() {
      return {
        buttonTab: '-1', // 按钮选择器
        is_detail: false, // 是否展示详情页
        listLoading: false, //表格内容加载
        listLoading2: false, //详情表格内容加载
        total: 0, //这个可能用不上了
        totalPage: 1,
        totalCont1: 0,
        totalData: {
          currPage: 0,
          pageSize: 0,
          totalCount: 0,
          totalPage: 0,
        },

        // 筛选框部分
        submis_time: null, // 可以使用, 也可使用change(e) 的参数e
        listQuery: {
          offset: 1, // 第几页
          limit: 10, // 每页显示的条数row
          keyword: '', // 搜索关键字
          startTime: '',
          endTime: '',
          submitUserId: '', // 发起人
          patrolUserId: '', // 巡店人
          pointId: '', // 网点id
          manner: '', // 巡店方式
          qualify: '', //是否合格
          status: '', //事件状态
          prId: '', // 巡察记录id
        },
        list_status: [{
          id: '',
          label: '全部'
        }, {
          id: 11,
          label: '已提交'
        }, {
          id: 12,
          label: '未提交'
        }], // 所属网点
        list_branch: [], //网点列表
        list_initiator: [], // 发起人
        list_patrol: [], // 巡店人
        list_qualify: [{
          id: '',
          label: '全部'
        }, {
          id: 1,
          label: '合格'
        }, {
          id: 0,
          label: '不合格'
        }], // 是否合格
        list_manner: [{
          id: '',
          label: '全部'
        }, {
          id: 1,
          label: '视频巡店'
        }, {
          id: 2,
          label: '图片巡店'
        }], // 巡店方式


        // 后端请求的数据
        dataList: [{
          baseInfo: {},
          score: {},
          result: {},
          checkItems: []
        }],
        // 查看详情信息
        checkList: {
          baseInfo: {},
          score: {},
          result: {},
          checkItems: []
        },
        // 全部
        qualifyListAll: {
          checkItems: []
        },
        // 合格
        qualifyList1: {
          checkItems: []
        },
        // 不合格
        qualifyList2: {
          checkItems: []
        },
        // ---------------------------------------------新接口的数据
        // 基础信息
        detailsiteName: '', // 网点名称
        detailpatrolUserName: '', // 巡检人名字
        detailsubmitDate: '', // 提交时间
        detailmethod: '', // 巡检方式
        detailstate: '', // 巡检状态
        // 得分信息
        detailtotalScore: '', // 总分
        detailvalidScore: '', // 有效分数
        detailgotScore: '', // 得分
        // 统计结果
        detailtotalIssue: '', // 问题总数
        detailqualify1: '', // 合格数
        detailqualify0: '', // 不合格数
        // 问题列表
        parmPrId: '',
        parmQualify: '-1',
        RecordIssue: ''
      }
    },
    // 生命周期函数（初始化之前执行）
    created() {
      this.getBranchList()
      this.getList()
      this.getCommit()
      this.getCruisingUser()
    },
    methods: {
      // 从后端获取查询巡检记录列表
      getList() {
        this.listLoading = true
        console.log('请求参数 :>> ', this.listQuery.startTime)
        listInspection3(
          {
            offset: this.listQuery.offset,
            limit: this.listQuery.limit,
            // prId: this.listQuery.prId, // 巡检记录id
            startTime: this.listQuery.startTime,
            endTime: this.listQuery.endTime,
            submitUserId: this.listQuery.submitUserId, // 发起人
            patrolUserId: this.listQuery.patrolUserId, // 巡店人
            siteId: this.listQuery.pointId, // 网点id
            // manner: this.listQuery.manner,   // 巡店方式
            qualify: this.listQuery.qualify, //是否合格
            // status: this.listQuery.status, //事件状态
          }
          ).then((res) => {
            console.log('res :>> ', res)
            if (res.code == 0) {
              // this.total = parseInt(res.data.totalCount) || 0 //后端还没有这个total
              if (res.data == null) {
                this.dataList = []
                this.totalData = []
                this.listLoading = false
              } else {
                this.dataList = res.data.list
                this.totalData = res.data
                this.listLoading = false
              }
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
          .catch(() => [
            this.listLoading = false,
            this.$message({
              message: '网络错误',
              type: 'error'
            })
          ])
      },
      // 获取当前区域的网点列表( 下拉回显)
      getBranchList() {
        cruisingBranch().then(res => {
          console.log('能拿到网点下拉回显吗 :>> ', res);
          if (res.code == 0) {
            this.list_branch = res.data || []
          }
        })
      },
      // 获取发起人列表( 下拉回显 )
      getCommit() {
        cruisingInitiator().then(res => {
          this.list_initiator = res.data || []
        })
      },
      // 获取巡店人列表( 下拉回显 )
      getCruisingUser() {
        cruisingUser().then(res => {
          this.list_patrol = res.data || []
        })
      },


      // 查看详情
      viewDetails(row) {
        this.listLoading2 = true
        this.is_detail = true
        this.parmPrId = row.prId
        console.log('巡检记录id :>> ', row.prId)

        // 基础信息
        getRecordBase({
          prId: row.prId
        }).then(res => {
          console.log('成功的基础信息 :>> ', res)
          this.detailsiteName = res.data.siteName
          this.detailpatrolUserName = res.data.patrolUserName
          this.detailsubmitDate = res.data.submitDate
          this.detailmethod = res.data.method
          this.detailstate = res.data.state
        })
        // 巡店分数
        getRecordScore({
          prId: row.prId
        }).then(res => {
          console.log('成功的巡店分数 :>> ', res)
          this.detailtotalScore = res.data.totalScore
          this.detailvalidScore = res.data.validScore
          this.detailgotScore = res.data.gotScore
        })
        // 统计结果
        getRecordResult({
          prId: row.prId
        }).then(res => {
          console.log('成功的巡检结果 :>> ', res)
          this.detailtotalIssue = res.data.totalIssue
          this.detailqualify1 = res.data.qualify1
          this.detailqualify0 = res.data.qualify0
        })
        // 问题列表
        this.getRecordIssue()
      },
      // 获取问题列表
      getRecordIssue() {
        this.listLoading2 = true
        getRecordIssue({
          prId: this.parmPrId,
          qualify: this.parmQualify
        }).then(res => {
          // console.log('成功的问题列表 :>> ', res)
          this.RecordIssue = res.data
          console.log('成功的问题列表 :>> ', this.RecordIssue)
          this.listLoading2 = false
        })
      },
      // 点击切换问题列表
      click_1(parm) {
        this.buttonTab = parm
        this.parmQualify = parm
        this.getRecordIssue()
      },
      detailsReturn() {
        this.is_detail = false
      },

      // 点击判断是否展示的方法
      // checkClick(row) {
      //   if (this.is_detail !== true) {
      //     this.listLoading = true
      //     this.checkList = Object.assign({}, row) // 点击触发函数 将点击行的值拷贝checkList里面
      //     this.totalCont1 = this.checkList.qualify1Issue / (this.checkList.qualify1Issue + this.checkList.qualify0Issue) *
      //       100

      //     console.log('看看这两个数据1 :>> ', this.checkList)
      //     console.log('看看这两个数据2 :>> ', this.totalCont1)

      //     this.is_detail = true
      //     this.qualifyListAll = this.checkList
      //     console.log("1110",this.qualifyListAll);

      //     this.qualifyList1 = this.checkList.checkItems.filter(
      //       (item, index, arr1) => {
      //         return item.qualify === 1 // 合格
      //       }
      //     )
      //     this.qualifyList2 = this.checkList.checkItems.filter(
      //       (item, index, arr1) => {
      //         return item.qualify === 0 // 不合格
      //       }
      //     )
      //     this.click_1('0')
      //     setTimeout(() => {
      //       this.listLoading = false
      //     }, 1 * 800)
      //   } else {
      //     this.is_detail = false
      //     this.listLoading = true
      //     setTimeout(() => {
      //       this.listLoading = false
      //     }, 1 * 800)
      //   }
      // },
      // // 点击事件
      // click_1(vla) {
      //   this.buttonTab = vla
      //   // this.checkList.checkItems = num
      //   // console.log("点击了",this.checkList.checkItems[0].qualify)
      //   if (vla === '0') {
      //     this.checkList.checkItems = this.qualifyListAll
      //     // console.log('点击全部')
      //   } else if (vla === '1') {
      //     this.checkList.checkItems = this.qualifyList1
      //     // console.log('点击1')
      //   } else if (vla === '2') {
      //     this.checkList.checkItems = this.qualifyList2
      //     // console.log('点击2')
      //   }
      // },
      // 更改过滤条件: 日期时间
      changeDateTime(e) {
        // console.log(e);
        // console.log(this.submis_time)
        this.listQuery.startTime = this.submis_time[0]
        this.listQuery.endTime = this.submis_time[1]
        console.log(this.submis_time);
        this.getList()
      },
      // 图表中的文字1
      formatText1(per) {
        return () => {
          return parseInt(per*100) + '%' + '\n' + '得分率'
        }
      },
      // 图表中的文字2
      formatText2(per2) {
        return () => {
          return per2 + '\n' + '检点总数'
        }
      },
      // 重置过滤条件
      clearFilter() {
        this.submis_time = null
        this.listQuery = {
          offset: 1, // 第几页
          limit: 10, // 每页显示的条数row
          keyword: '', // 搜索关键字
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          submitUserId: '', // 发起人
          patrolUserId: '', // 巡店人
          pointId: '', // 网点id
          manner: '', // 巡店方式
          qualify: '', //是否合格
        }
        this.getList()
      },
    }
  }
</script>

<style lang="scss">
  //不带scoped能直接改变引入插件的内容
  .data-picture {
    svg path:first-child {
      stroke: #ff8b8b;
    }
  }
</style>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .filter-container {

    // background-color: #eef;
    .input-box {
      margin-bottom: 15px !important;
    }
  }

  .Page_box {
    padding: 10px;
    background-color: $my_white;
  }

  /* 默认页面 */
  .pagination-container {
    margin-top: 0;
  }

  .action {
    font-size: 13px;
    color: var(--app_primary);
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }

  /* 点击查看后的页面 */
  /* 头部三个卡片 */
  .crurecordBox {
    display: flex;
  }

  .crurecordBox>div {
    border-radius: 10px;
  }

  .cube {
    display: inline-block;
    margin-right: 5px;
    width: 3px;
    height: 14px;
    transform: translateY(1px);
    background: rgb(96, 205, 255);
  }

  .box-card2 {
    margin: 0 15px;
  }

  ._progress {
    white-space: pre
  }

  .crurecordBox>div:nth-child(1) {
    /* background: lightblue; */
    flex: 2;
  }

  .crurecordBox>div:nth-child(2) {
    flex: 1;
  }

  .crurecordBox>div:nth-child(3) {
    flex: 1;
  }

  .el-card__header {
    border-bottom: 0;
  }

  .el-card__body {
    padding-left: 40px;
    padding: 0px 10px 10px 40px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin: auto;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }

  /* 信息内容样式 */
  .content {
    margin-top: 10px;
  }

  /* 三个信息的详细内容信息的盒子 */
  .contentBox {
    display: flex;
  }

  .contentBox>div {
    flex: 1;
  }

  .box-content {
    margin-top: 10px;
  }

  .itemBox {
    margin: auto;
  }

  /* 合格的 */
  .statistics {
    display: flex;
  }

  .result {
    flex: 4;
  }

  .passpie2 {
    font-size: 13px;
    line-height: 18px;
    color: rgb(58, 184, 0);
    background: rgb(206, 255, 232);
    padding: 0 5px;
    text-align: center;
    border-radius: 10%;
  }

  .passpie3 {
    font-size: 13px;
    line-height: 18px;
    color: red;
    background: rgb(255, 251, 194);
    padding: 0 5px;
    text-align: center;
    border-radius: 10%;
  }

  /* 四个圆点 */
  .point {
    display: inline-block;
    margin-right: 5px;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-2px);
  }

  .count2 {
    background-color: rgb(191, 255, 148);
  }

  .count3 {
    background-color: rgb(44, 58, 255);
  }

  .count4 {
    background-color: rgb(170, 192, 255);
  }

  .count5 {
    background-color: #ff8b8b;
  }

  /* 查看的  第二个大盒子 */
  .centerBox {
    background: white;
    padding: 20px;
    margin-top: 15px;
  }

  .pics {
    margin: 10px;
  }

  /* 三个按钮 */
  .threebtn {
    margin-bottom: 10px;
  }

  /* 取证图片 */
  .demo-image__preview {
    line-height: 0;
  }
</style>
